<template>
	<view>
		<view style="margin: 50rpx;" v-if="postList.length>0" v-for="(post,index) in postList" :key="index">
			<image class="smallHeaderPortrait" style="display: inline-block;" :src="post.headPortrait"></image>
			<text style="font-size: smaller;padding-left: 30rpx;display: inline-block;">{{post.username}}</text>
			<text style="font-size: smaller;padding-left: 30rpx;display: inline-block;">{{post.postTime}}</text>
			<view style="height: 50rpx;"></view>
			<view>
				<text>{{post.postTitle}}</text>
				<image style="position: absolute;left: 600rpx;height: 50rpx;width: 50rpx;" src="../../../static/delete.png" @click="deletePost(post.postId)"></image>
			</view>
			<view v-for="(postImg,index) in post.postImgList" :key="index">
				<image :src="postImg"></image>

			</view>

			<view>{{post.postContent}}</view>
			<view style="height: 50rpx;"></view>
			<view class="clickCount">
				<image v-if="!post.isThumbs" style="width: 40rpx;height: 40rpx;" @click="updateThumbs(post.postId,1,index)" src="/static/thumbs.png"></image>
				<image v-if="post.isThumbs" style="width: 40rpx;height: 40rpx;" @click="updateThumbs(post.postId,0,index)" src="/static/had-thumbs.png"></image>
				{{post.postClick}}
			</view>
			<view style="height: 50rpx;"></view>
			<view v-if="post.postCommentForShowList.length>0">评论：</view>
			<view style="height: 20rpx;"></view>
			<view v-for="(postCommentForShow,index) in post.postCommentForShowList" :key="index">
				<view style="font-size: smaller;">{{postCommentForShow.commentContent}}</view>
				<view style="font-size:x-small;margin-left: 400rpx;">{{postCommentForShow.commentUsername}}</view>
				<view style="font-size:x-small;margin-left: 450rpx;">{{postCommentForShow.commentTimeJson}}</view>
			</view>
			<view style="height: 50rpx;"></view>
		</view>
		<view v-else>您还没有发过帖子，去说点什么让大家认识你吧！</view>
	</view>
</template>

<script>
	import base from '@/common/base.js'
	let toast = msg => {
		uni.showToast({
			title: msg,
			icon: 'none',
		});
	}
	export default {
		data() {
			return {
				postList: [],
			}
		},
		onLoad() {
			this.getPostList();
		},
		methods: {
			getPostList(postId) {
				uni.request({
					url: base.urlPrefix + 'yoga_app/post/coachGetPostDetailList',
					data: {
						coachId: base.coach.coachId
					},
					success: (res) => {
						this.postList = res.data.list;
					}
				})
			},
			updateThumbs(postId, flag, index) {
				if (flag == 1) {
					this.postList[index].postClick++;
					this.postList[index].isThumbs = true;
				} else {
					this.postList[index].postClick--;
					this.postList[index].isThumbs = false;
				}
				uni.request({
					url: base.urlPrefix + 'yoga_app/thumbs-up/coachUpdateThumbs',
					data: {
						postId: postId,
						coachId: base.coach.coachId,
						postClick: this.postList[index].postClick,
						flag: Number(flag)
					}
				});
			},
			sendComment(postId, index) {
				if (this.postList[index].comment.trim().length != 0) {
					uni.request({
						url: base.urlPrefix + 'yoga_app/post-comment/saveCoachPostComment',
						data: {
							postId: postId,
							comment: this.postList[index].comment,
							coachId: base.coach.coachId
						},
						success: (res) => {
							toast(res.data.message);
							this.postList[index].comment = "";
							this.getPostList();
						}
					});
				} else {
					uni.showToast({
						title: '评论内容不能为空',
						icon: 'none'
					})
				}
			},
			deletePost(postId){
				uni.showModal({
				    title: '删除帖子',
				    content: '您确定要删除吗',
				    success: function (res) {
				        if (res.confirm) {
				            uni.request({
				            	url:base.urlPrefix+"yoga_app/post/coachDeletePostById",
								data:{
									postId:postId
								},
								success: (res) => {
									uni.showToast({
										icon:'success',
										title:'删除成功'
									});
									this.getPostList();
								}
				            })
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	.smallHeaderPortrait {
		width: 40rpx;
		height: 40rpx;
		border-radius: 60rpx;
		margin-left: 5%;
		background: #ffffff;
	}

	.clickCount {
		margin-left: 80%;
	}
	.bottom {
		margin-bottom: 0rpx;
	}

	.btn-bottom {
		margin-bottom: 0rpx;
		margin-right: 0rpx;
	}
</style>
